<template>
  <view class="reserve-page">
    <view class="reserve-header">我的预约</view>
    <view class="reserve-content">
      <view v-if="loading" class="reserve-empty">加载中...</view>
      <view v-else-if="events.length === 0" class="reserve-empty">暂无预约内容</view>
      <view v-else>
        <view v-for="item in events" :key="item.id" class="reserve-item">
          <view class="item-title">{{ item.title }}</view>
          <view class="item-time">{{ formatTimeRange(item.start, item.end) }}</view>
          <view class="item-technician">技师：{{ item.technician.username }}</view>
          <view class="item-notes">{{ item.notes.replace(/^客户备注:/,'备注:') }}</view>
          <view class="item-diff">{{ timeDiff(item.start) }}</view>
        </view>
      </view>
    </view>
    <TabBar :current="2"/>
  </view>
</template>

<script>
export default {
  name: 'ReservePage',
  data() {
    return {
      events: [],
      loading: true
    };
  },
  onLoad() {
    uni.request({
      url: 'https://vue.maylab.top/uni/events',
      method: 'GET',
      success: (res) => {
        if (res.statusCode === 200 && res.data && Array.isArray(res.data.data)) {
          this.events = res.data.data;
        } else {
          this.events = [];
        }
        this.loading = false;
      },
      fail: () => {
        this.events = [];
        this.loading = false;
      }
    });
  },
  methods: {
    formatTimeRange(startStr, endStr) {
      if (!startStr || !endStr) return '';
      const start = new Date(startStr);
      const end = new Date(endStr);
      const pad = n => n.toString().padStart(2, '0');
      const year = start.getFullYear();
      const month = pad(start.getMonth() + 1);
      const day = pad(start.getDate());
      const hour = pad(start.getHours());
      const min = pad(start.getMinutes());
      const endMonth = pad(end.getMonth() + 1);
      const endDay = pad(end.getDate());
      const endHour = pad(end.getHours());
      const endMin = pad(end.getMinutes());
      if (month === endMonth && day === endDay) {
        return `${year}年${month}月${day}号 ${hour}时${min}分-${endHour}时${endMin}分`;
      } else {
        return `${year}年${month}月${day}号 ${hour}时${min}分-${endMonth}月${endDay}号 ${endHour}时${endMin}分`;
      }
    },
    timeDiff(startStr) {
      if (!startStr) return '';
      const now = new Date();
      const start = new Date(startStr);
      let diff = Math.floor((start - now) / 1000); // 秒
      if (diff < 0) return '已过预约时间';
      const days = Math.floor(diff / (3600 * 24));
      diff %= 3600 * 24;
      const hours = Math.floor(diff / 3600);
      diff %= 3600;
      const mins = Math.floor(diff / 60);
      let str = '';
      if (days > 0) str += `${days}天`;
      if (hours > 0) str += `${hours}小时`;
      if (mins > 0) str += `${mins}分钟`;
      return str ? `距离现在：${str}` : '即将开始';
    }
  }
};
</script>

<style>
.reserve-page {
  background: #f8f8f8;
  min-height: 100vh;
  position: relative;
  padding-bottom: 120rpx;
}
.reserve-header {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  padding: 32rpx 0 0 32rpx;
}
.reserve-content {
  padding: 32rpx;
}
.reserve-empty {
  color: #888;
  font-size: 28rpx;
  text-align: center;
  margin-top: 80rpx;
}
.reserve-item {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 18rpx;
  padding: 18rpx 20rpx;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.item-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 8rpx;
}
.item-time {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 6rpx;
}
.item-technician {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 6rpx;
}
.item-notes {
  font-size: 24rpx;
  color: #b77;
}
</style>
